<link href="css/homepage/billboard.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/script/jquery.min.js"></script>
<script type="text/javascript">
	var currentGallery;
	var currentPic;
	var picTypes;
	var pics;
	var tabWidth;

	function showLoading(){
		$("#billboard #loading_mask").fadeIn("slow");
	}
	function hideLoading(){
		$("#billboard #loading_mask").fadeOut("slow");
	}
	
	$(document).ready(function(){
		$.getJSON("/homepage/getGalleryPicTypes", processPicTypes);
		function processPicTypes(_picTypes){
			picTypes = _picTypes;
			var s = "";
			tabWidth = $("#billboard").width() / picTypes.length;
			for (var i = 0; i < picTypes.length; i ++)
				$("#billboard #bottom_tabs").append("<li class='tab_normal' id='bottom_tab'><a class='tablink_normal' id='bottom_tab_link" + i + "' href='javascript:showGallery(" + i + ")'></a></li>");
			$("#billboard #bottom_tabs li a").hide();
			$("#billboard #bottom_tabs li a").css("width", tabWidth - 2);
			$("#billboard #bottom_tabs li a").show();

			$("#billboard #gallery_main").hide();

			currentGallery = -1;
			showGallery(0);
		}
	});

	function showGallery(id){
		if (currentGallery == id) return; 
		showLoading();
		if (currentGallery != -1){
			$("#billboard #bottom_tabs li .tablink_selected").fadeOut(400, function(){
				$("#billboard #bottom_tabs li .tablink_selected").css("left", id * tabWidth);
				$("#billboard #bottom_tabs li .tablink_selected").fadeIn(400);
			});	
		}

		$("#billboard #gallery_main").fadeOut("slow");
		$("#billboard #gallery_tabs").fadeOut("slow", function(){
			$.getJSON("/homepage/getGalleryPics", {'id' : picTypes[id][0]}, processPics);
			function processPics(_pics){
				pics = _pics;
				$("#billboard #gallery_tabs li").remove();
				$("#billboard #gallery_tabs").append("<li class='tab' id='gallery_tab'><a class='tablink_selected' href='javascript:void(0)'></a></li>");
				for (var i = 0; i < pics.length; i ++)
					$("#billboard #gallery_tabs").append("<li class='tab' id='gallery_tab'><a class='tablink_normal' id='gallery_tab_link" + i + "' href='javascript:showGalleryPic(" + i + ")'></a></li>");
				$("#billboard #gallery_tabs").css("width", pics.length * 20);
				$("#billboard #gallery_tabs").fadeIn("slow");
				currentGallery = id;

				currentPic = -1;
				showGalleryPic(0);

				hideLoading();
			}
		})
	}

	function showGalleryPic(id){
		if (currentPic == id) return;
		if (id >= pics.length) return;
		$("#gallery_tabs .tablink_selected").fadeOut("fast");
		$("#billboard #gallery_main").fadeOut("fast", function(){
			var image = new Image();
			image.onload = function(){
				if (image.key != currentPic) return;
				$("#billboard #gallery_main img").remove();
				$("#billboard #gallery_main").append(image);
				$("#billboard #gallery_img").css("left", ($("#billboard").width() - image.width) / 2);
				$("#billboard #gallery_img").css("top", (400 - image.height) / 2);
				$("#gallery_tabs .tablink_selected").css("left", id * 20);
				$("#gallery_tabs .tablink_selected").fadeIn("fast");
				$("#billboard #gallery_main").fadeIn("fast");
			};
			image.id = "gallery_img";
			image.key = id;
			image.src = pics[id];
			currentPic = id;
		});
	}
</script>
<div id="billboard">
	<div class="notify" id="loading_mask">
		<div id="loading_notify">
			<p>loading ...</p>	
		</div>
	</div>
	<div id="gallery_main">
	</div>
	<div id="gallery_bottom">
		<ul class="tabs" id="gallery_tabs">
		</ul>
	</div>
	<ul class="tabs" id="bottom_tabs">
		<li class="tab_selected" id="billboard_tab_selected"><a class="tablink_selected" href="javascript:void(0)" type="hidden"></a></li>
	</ul>
</div>
